import React from 'react';
import {
    NativeModules,
    LayoutAnimation,
    Text,
    TouchableOpacity,
    StyleSheet,
    View,
    PanResponder,
} from 'react-native';

const { UIManager } = NativeModules;

UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);

export default class App extends React.Component {

    _top;
    _left;

    state = {
        w           : 100,
        h           : 100,
        top         : 0,
        left        : 0,
        bg          : 'white',
    };

    _onPress = () => {
        // Animate the update
        LayoutAnimation.spring();
        this.setState({
            // w: this.state.w + 15,
            // h: this.state.h + 15,
            left: this.state.left + 15
        })
    };

    _reSize = () => {
        // Animate the update
        LayoutAnimation.spring();
        // LayoutAnimation.linear();
        this.setState({
            w: 100,
            h: 100,
            top         : 0,
            left        : 0,
        })
    };


    componentWillMount(){

        /** 这玩意只是个点击配置 */
        this._panResponder = PanResponder.create({

            // 要求成为响应者(4个)
            onStartShouldSetPanResponder: (evt, gestureState) => true,          // 监听点击
            onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
            onMoveShouldSetPanResponder: (evt, gestureState) => true,           // 监听拖动
            onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

            /**
             * 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
             * gestureState.{x,y}0 现在会被设置为0
             */
            onPanResponderGrant: (evt, gestureState)=>{
                // console.log(gestureState.x0 + ' ' + gestureState.y0);
                this._top   = this.state.top;
                this._left  = this.state.left;
                this.setState({bg: 'red'})
            },

            /**
             * 最近一次的移动距离为gestureState.move{X,Y}
             * 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
             */
            onPanResponderMove: (evt, gestureState)=>{
                // console.log(gestureState.dx + ' ' + gestureState.dy);
                this.setState({
                    top     : this._top  + gestureState.dy,
                    left    : this._left + gestureState.dx
                })
            },

            /**
             * 用户放开了所有的触摸点，且此时视图已经成为了响应者。
             * 一般来说这意味着一个手势操作已经成功完成。
             */
            onPanResponderRelease: (evt, gestureState)=>{
                this.setState({
                    bg      : 'white',
                    top     : this._top  + gestureState.dy,
                    left    : this._left + gestureState.dx
                })
            },


            onPanResponderTerminationRequest: (evt, gestureState) => true,

            /** 另一个组件已经成为了新的响应者，所以当前手势将被取消。 */
            onPanResponderTerminate: (evt, gestureState) => {

            },

            /** 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者(默认返回true。目前暂时只支持android。) */
            onShouldBlockNativeResponder: (evt, gestureState) => {
                return true;
            },
        })
    }

    componentDidMount(){
        this.setState({
            top     : this.state.top  + 100,
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <View {...this._panResponder.panHandlers} style={[styles.box, {
                    width   : this.state.w,
                    height  : this.state.h,
                    top     : this.state.top,
                    left    : this.state.left,
                    backgroundColor: this.state.bg,
                }]} />


                <TouchableOpacity onPress={this._onPress}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>Press me!</Text>
                    </View>
                </TouchableOpacity>

                <TouchableOpacity onPress={this._reSize}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>Reset!</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    box: {
        width: 200,
        height: 200,
    },
    button: {
        backgroundColor: 'black',
        paddingHorizontal: 20,
        paddingVertical: 15,
        marginTop: 15,
    },
    buttonText: {
        color: '#fff',
        fontWeight: 'bold',
    },
});